<template>
  <div>
    <div v-if="tabadata.length>0">
      <el-card class="box-card" v-for="(i,index) in tabadata" :key="index">
        <p class="pass">店铺名：{{ i.shop_name }}</p>
        <p class="pass">订单号：{{ i.task_order }}</p>
        <p class="pass" v-copy="i.title">评语内容：{{ i.title.substring(0, 10) }}...<b style="color:red;font-size:16px;">(点击复制)</b>
        </p>
        <div class="pass">评语图片：<b style="color:red;">(点击图片放大长按保存)</b>
            <viewer>
              <img :src="item" v-for="item in i.img" style="width:80px;" alt="">
            </viewer>
        </div>
<!--        <p class="pass" style="font-size:16px;">上传时间：{{ i.create_time }}</p>-->
        <div style="display:flex;">
          <el-button type="primary" size="mini" v-show="i.status == 1" @click="showing = true,evaluate_img=i">提交截图
          </el-button>
          <el-button type="danger" size="mini" v-show="i.status == 4">审核拒绝</el-button>
          <el-button type="warning" size="mini" v-show="i.status == 2">提交待审核</el-button>
          <el-button style="background:lightpink;color:white" @click="vaultDialog = true,yjmoney = i"
                     v-show="i.status == 3" size="mini">佣金为(￥1)
          </el-button>
          <el-button style="background:#bbb;color:white" @click="" v-show="i.status == 5" size="mini">已提佣金为(￥1)
          </el-button>
        </div>
        <p v-show="i.status == 4" style="margin-top:10px;">拒绝理由：<b
          style="color:red;font-size:16px;">{{ i.note }}</b></p>
<!--        <p v-show="i.evaluate_img!=''" style="margin-top:10px;">上传截图：-->
<!--          <viewer><img :src="i.evaluate_img" style="width:50px;" alt=""></viewer>-->
<!--        </p>-->
      </el-card>
    </div>
    <div class="nodata" v-else>
      <img src="../assets/img/nodata.png" alt="">
      <span class="textcontent">没有需要评价的任务哦，马上去做单</span>
      <span class="taskbtn" @click="$router.push('/home')">申请任务</span>
    </div>
    <van-dialog v-model="vaultDialog" title="提现到金库" show-cancel-button @confirm="onConfirm"
                @cancel="vaultDialog = false">
      <div class="dialog">
        <img src="../assets/img/money.png" alt="">
        <p style="font-size:26px;line-height: 50px;">￥1</p>
        <p style="color: #808080;">佣金提现到金库</p>
      </div>
    </van-dialog>
    <van-dialog v-model="show" title="评语图片">

    </van-dialog>
    <van-dialog v-model="showing" title="截图上传" showCancelButton @confirm="Confirmimg">
      <div style="width:100%;height:200px;display:flex;justify-content:center;align-items: center;">
        <div style="display:flex;flex-direction:column;width:70%;margin:10% auto">
          <p style="font-size:16px;margin-bottom:20px;">评价截图：</p>
          <el-upload
            class="upload-demo"
            :headers="imgheader"
            list-type="picture"
            action="/api/v1/register/dyimage_recognition"
            :on-remove="handlerror"
            :on-success="handlesuccess">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </div>
    </van-dialog>
    <return></return>
    <Footer></Footer>
  </div>
</template>

<script>
import {evaluate_list, evaluate_submit, evaluate_withdrawal, extra_task_receive} from "../api/api";
import Footer from '../components/footer.vue'
import Return from "./returnone";

export default {
  name: "PJing",
  components: {Return, Footer},
  data() {
    return {
      show: false,
      vaultDialog: false,
      evaluate_img: [],
      yjmoney: [],
      imgheader: {token: window.localStorage.getItem('xfq_token')},
      image: [],
      images: '',
      showing: false,
      page_size: 20,
      page: 1,
      tabadata: [],
      extra_task: [],
      active: '1',
    }
  },
  methods: {
    getRaskList(item) {
      let params = {
        task_id: item.task_id
      }
      extra_task_receive(params).then((res) => {
        if (res.Status == 200) {
          this.$toast(res.Message)
          this.$router.push('/OtherUserlist')
        } else {
          this.$toast(res.Message)
          this.extra_task_lists()
        }
      })
    },
    //佣金提现到金库
    onConfirm() {
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        id: this.yjmoney.id,
      }
      evaluate_withdrawal(params).then(res => {
        toastload.clear()
        console.log('金库', res)
        if (res.Status == 200) {
          this.$toast(res.Message)
          setTimeout(this.getPJlist(), 1500)
        } else {
          this.$toast(res.Message)
        }
      })
    },
    handlerror() {
      this.images = ""
    },
    //上传截图
    Confirmimg() {
      let params = {
        id: this.evaluate_img.id,
        evaluate_img: this.images
      }
      evaluate_submit(params).then((res) => {
        if (res.Status == 200) {
          this.$toast(res.Message)
          this.getPJlist()
        } else {
          this.$toast(res.Message)
        }
      })
    },
    //评价列表
    getPJlist() {
      let params = {
        page: this.page,
        page_size: this.page_size,
      }
      evaluate_list(params).then((res) => {
        if (res.Status == 200) {
          this.tabadata = res.Data.map((item) => {
            item.img = JSON.parse(item.img)
            return item
          })
          console.log(this.tabadata);
        }
      })
    },
    //上传图片成功返回
    handlesuccess(res) {
      this.images = res.UrlImg
    }
  },
  mounted() {
    this.getPJlist()
    console.log(this.image);
  }
}
</script>

<style scoped lang="stylus">
.box-card {
  height 100%
  overflow-x hidden
  overflow-y scroll
  font-size 16px
  border-bottom-left-radius 5px
  //margin-bottom -80px
}

.pass {
  margin-bottom 10px
}

.dialog {
  padding 20px 0 30px
  font-size 14px

  img {
    height 100px
  }

  p {
    text-align center
  }
}

.nodata {
  padding-top: 80px
  display flex
  flex-direction column
  justify-content center
  align-items center

  img {
    width 70%
  }

  .textcontent {
    font-size 14px
    color #a79478
  }

  .taskbtn {
    width 200px
    color #ffffff
    font-size 14px
    background #64c5ff
    text-align center
    line-height 36px
    margin-top 20px
  }
}

</style>
